<template>
<view class="bankCard-add-box">
  <view v-if="!ifSuccess">
    <view class="margin"><text class="text-lg">持卡人信息</text></view>
    <form>
      <view class="cu-form-group">
        <view class="title">持卡人</view>
        <input placeholder="请输入持卡人姓名" name="addressName" @input="addressNameInput" :value="bankCardConfig.name"/>
      </view>
      <view class="cu-form-group">
        <view class="title">身份证号</view>
        <input placeholder="请输入持卡人的身份证号" name="addressPhone" @input="addressPhoneInput" :value="bankCardConfig.idNumber"/>
      </view>
    </form>

    <view class="margin flex flex-direction padding-top">
      <text class="text-lg">银行卡信息</text>
      <text class="text-gray">请使用与持卡人信息一致的储蓄卡</text>
    </view>
    <form>
      <view class="cu-form-group border-bottom">
        <view class="title">我的银行卡</view>
        <input placeholder="请输入银行卡号" name="addressName" @input="addressNameInput" :value="bankCardConfig.cardNumber"/>
      </view>
      <!-- <view class="cu-form-group">
        <view class="title">手机号码</view>
        <input placeholder="请输入银行卡预留手机号码" name="addressPhone" @input="addressPhoneInput" :value="bankCardConfig.phone"/>
      </view>
      <view class="cu-form-group">
        <view class="title">验证码</view>
        <input placeholder="请输入验证码" name="addressPhone" @input="addressPhoneInput" :value="bankCardConfig.code"/>
        <view class="text-orange border-left padding-left">{{smsText}}</view>
      </view> -->
      <security-code phonePlaceholder="请输入银行卡预留手机号码" smsCodeTitle="验证码" smsCodePlaceholder="请输入验证码" @onChange="getSecurityCode"></security-code>
    </form>

    <view class="text-right margin-sm"><text class="cuIcon-info text-xxl"></text>支持的银行</view>

    <view class="flex flex-direction margin-top padding">
      <button class="cu-btn dm-btn round bg-orange text-xl" @tap="onAdd">绑定银行卡</button>
    </view>
  </view>

  <view v-else class="bankCard-success-box h100 bg-white padding-top text-black">
    <view class="success-icon text-center margin-tb">
      <text class="cuIcon-roundcheckfill text-orange"></text>
    </view>
    <view class="text-xl text-center margin-tb">您已成功绑定银行卡!</view>
    <view class="flex flex-direction margin-tb padding">
      <button class="cu-btn dm-btn round bg-orange text-xl" @tap="backToMenu">确定</button>
    </view>
  </view>
</view>
</template>

<script>
// TODO 缺少点击`支持的银行`后的页面
import securityCode from '@/components/security-code/security-code'

export default {
  name: 'bankCard-add', // 银行卡绑定
  components: { securityCode },
  data () {
    return {
      ifHasRecord: false,
      ifSuccess: false,
      smsText: '获取验证码',
      bankCardConfig: {
        name: '',
        idNumber: '',
        cardNumber: '',
        phone: '',
        code: ''
      }
    }
  },
  methods: {
    onAdd() {
      this.ifSuccess = true
    },
    backToMenu() {
      this.ifSuccess = false
    },
    addressNameInput() {},
    addressPhoneInput() {},
    getSecurityCode(params) {
      console.log('获取验证码', params)
    }
  }
}
</script>

<style lang="less">
.bankCard-add-box {
  .cu-form-group .title { // 统一form内的title宽度
    min-width: calc(4em + 30px);
  }

  .dm-btn {
    width: 100%;
  }
}

.bankCard-success-box {

  .success-icon {
    margin-top: 100rpx;
    font-size: 120px;
  }
}
</style>
